<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>放大镜</title>
    <script src="js/jquery.js"></script>
    <style>
    	body{
    		margin: 0;
    	}
        main{
            width: 600px;
            margin: 150px;
            display: flex;
            flex-direction: column;
        }
        #normal{
            display: inline-block;
            height: 300px;
        }
        #normal img{
            width: 600px;
            height: 300px;
        }
        #small img{
            width: 150px;
            float: left;
            border: 1px solid orange;
            box-sizing: border-box;
            cursor: pointer;
        }
        p{
            clear: both;
        }
        #big{
            width: 200px;
            height: 200px;
            position: absolute;
            background-repeat: no-repeat;
            background-size: 1800px 900px;
            display: none;
            z-index: 10;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <main>
        <div id="normal">
            <!--正常大小图片-->
            <img src="img/1.jpg" alt="">
            <!--放大镜框-->
            <div id="big"></div>
        </div>
        <div id="small">
            <!--下方缩略图-->
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <!--清除浮动-->
            <p></p>
        </div>
    </main>
    <script>
        // 鼠标在缩略图上切换时，更换正常图片
        $('#small img').mousemove(function(){
            //获取缩略图的src
            var smallSrc = this.src;
            //更换大图的src
            $('#normal img').attr('src',smallSrc);
        })
        // 鼠标在大图上移动时，显示放大镜框
        $('#normal').mousemove(function(e){
            // 获取鼠标位置
            var x = e.pageX;
            var y = e.pageY;
            // 获取大图的src
            var normalSrc = $('#normal img').attr('src');
            // 设置放大镜框的css样式
            $('#big').css({
                //上面style中设置放大镜框宽高各200px
                // 为使鼠标处于框中心，框的定位需设置如下
                'left':(x - 200 / 2) + 'px',
                'top':(y - 200 / 2) + 'px',
                'display':'inline-block',
                // 设置放大镜框背景图片路径为当前正常图片路径
                'background-image':'url(' + normalSrc + ')',
                // 设置背景图片位置
                // x-150，y-150即鼠标在正常图片上的坐标
                // 上面style设置了背景图片大小为正常图片大小的3倍，故此处背景图片定位时需要*3
                // 加100是因为框本身向左向上移动了100px
                'background-position':(-(x - 150) * 3 + 100)+'px '+(-(y - 150) * 3 + 100)+'px' 
            });
            // 鼠标移出正常图片范围时隐藏放大镜框
//          $('#normal').mouseout(function(){
//          	$('#big').css('display','none');
//          })
            if(x<150 || x>750 || y<150 || y>450){
                $('#big').css('display','none');
            }
        })
    </script>
</body>
</html>